import logo from './logo.svg';
import './App.css';
// 导入组件
import ComEvent from './ComEvent';
import Comstate from './ComState';
import Userinfo from './Userinfo';

function App() {
  let name = 'Ma Baoguo';
  let age = 70;
  let hasWude = true;
  let person = {
    title: '掌门人'
  }
  let zhaoShi = [1,2,3,4,5];
  let color = 'pink';
  let style1 = {
    color: 'red',
    fontSize: '40px'
  }
  return (
    <div className="App">
      <ComEvent></ComEvent>
      <Comstate></Comstate>
      {/* 如果需要传递所有的props给子组件：{...this.props} */}
      <Userinfo age={18} name="tom"></Userinfo>
      {/* 修改标签内容：变量、计算、表达式 */}
      {/* 修改标签属性：去掉双引号，加上花括号 */}
      {/* class的处理：html中的class要换成className，js的中的不变 */}
      {/* JSX的特点：允许js和html混写，js代码用花括号包裹，html用尖括号包裹 */}
      {/* 对象不能直接输出，数组可以直接输出 */}
      <p>{name}</p>
      <p>{age+1}</p>
      <p>{hasWude?'':'不'}讲武德</p>
      <p>{person.title}</p>
      <p>{zhaoShi.length}</p>
      {/* 条件渲染 */}
      {
        // 匿名函数自执行
        (function() {
          if(hasWude) {
            // 加上括号，避免在每一行的末尾自动添加分号
            return (
              <p>
                我是讲武德的马老师
              </p>)
          }else {
            return (<mark>我是不讲武德的年轻人</mark>)
          }
        })()
      }
      {/* 循环渲染 */}
      {
        zhaoShi.map(item => {
          // key和vue中的key作用相同，都是为了更加高效的更新虚拟dom，虚拟dom就是js的对象
          return (<button key={item}>第{item}页</button>)
        })
      }
      <hr />
      <button className={'btn'+1}>按钮1</button>
      <button className={'btn'+2}>按钮2</button>
      <button className={!hasWude?'btn3':'btn4'}>按钮3</button>
      <hr />
      {/* 外层花括号表示是js的变量；内层 括号表示是对象格式 */}
      <div style={{width: '100px', height: '100px', background: color}}></div>
      <p style={style1}>我是一段文字</p>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" name={name} />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
